<template>
	<view class="page">
		<view class="tabs">
			<view
				v-for="(item, index) in tabsList"
				:key="index"
				:class="{
					'item': true,
					'is-active': status == item.value
				}"
				>
				<view class="cell" @click="changeTabs(item)">
					<text>{{ item.label }}</text>
				</view>
			</view>
		</view>
		
		<view class="data-list">
			<view
				v-for="(item,index) in list"
				:key="index"
				class="item">
				<view class="cell">
					<view class="thead">
						<view class="title">
							<text>{{ item.name }}</text>
						</view>
						<view class="number">
							<text>{{ item.codelist.length }}张</text>
						</view>
					</view>
					<view class="tbody">
						<view
							v-for="(item2, index2) in item.codelist"
							:key="index2"
							:class="{
								'row': true,
								'is-used': index2.status == 1
							}">
							<view class="left">
								<view class="name">
									<text>{{ item2.pro_name }}</text>
								</view>
								<view class="time">
									<text>{{ item2.usetime || '长期有效' }}</text>
								</view>
							</view>
							<view class="right">
								<view
									v-if="item2.status == 0"
									class="btn"
									@click="linkToDetail(item2)">
									<text>去使用</text>
								</view>
								<view
									v-if="item2.status == 1"
									class="icon">
									<image src="https://img.2024csnl.com/static/2.x/a77.png" mode=""></image>
								</view>
								<!-- {{item.amount}} -->
							</view>
							<view class="clip-t"></view>
							<view class="clip-b"></view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="flex-center addressImgBox" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>
			<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="hintModalBox">
				<image :src="code_img"></image>
				<view style="text-align: center;">
					<text style="text-align: center;">NO.{{currentHexiao.activation_code}}</text>
				</view>
				<view class="subBtn flex-center" @click="heXiaoSuccess">关闭</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		merchantScoreDetails
	} from "../../api/index.js"
	export default {
		data() {
			return {
				tabsList: [
					{ label: '全部', value: '' },
					{ label: '待使用', value: '0' },
					{ label: '已使用', value: '1' }
				],
				list: [],
				status: '',
				pagenum: 1,
				totalPage: '',
				noMoreData: false,
				bid: '',
				code_img: '',
				currentHexiao: {}
			}
		},
		onLoad(opt) {

			this.bid = opt.bid
			this.getMerchantScoreDetails()

		},
		onReachBottom() {
			if (this.pagenum < this.totalPage) {
				this.pagenum += 1
				this.getMerchantScoreDetails('bottom')

			} else {
				this.noMoreData = true
			}

		},
		methods: {
			changeTabs ({ value }) {
				this.status = value
				this.getMerchantScoreDetails()
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			getQrCode(hexiao) {
				if(hexiao.status == '已使用'){
					this.showToast("该核销码已使用！")
				}
				else{
					this.currentHexiao = hexiao
					this.code_img = hexiao.code_img
					this.open('popup')
				}
				
			},
			linkToDetail (obj) {
				uni.navigateTo({
					url: `/package/we/pages/hexiao-detail/detail?id=${obj.id}`
				})
			},
			// 核销完成确认
			async heXiaoSuccess() {

				this.close('popup')
				this.getMerchantScoreDetails()

				// const result = await new Promise(resolve => {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: `确认商家已经核销完成?`,
				// 		confirmColor: '#41644A',
				// 		success(msg) {
				// 			resolve(msg)
				// 		}
				// 	});
				// })
				// if (result.confirm) {
				// 	this.close('popup')
				// 	this.getMerchantScoreDetails()
				// }
			},
			async getMerchantScoreDetails(type) {
				console.log(this.bid)
				const res = await merchantScoreDetails('s=ApiZwyRequest/hexiaocodelist', {
					pagenum: this.pagenum,
					status: this.status
				})
				const {
					msg,
					data,
					status,
				} = res.data
				console.log(res, "res")
				if (status == 1) {
					this.totalPage = data.last_page
					type == 'bottom' ? this.list.push(...data.data) : this.list = data.data
					// [模拟数据]
					// this.list = [
					// 	{
					// 		name: '泌伶清润养肺雾化液',
					// 		codelist: [
					// 			{
					// 				code_img: '',
					// 				createtime: "2024-09-10 15:06:54",
					// 				pro_name: "泌伶清润养肺雾化液",
					// 				status: 0,
					// 				status_txt: '未使用',
					// 				U0us1nesshame: '',
					// 				usetime: ''
					// 			}
					// 		]
					// 	}
					// ]
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false

				} else {
					this.showToast(msg)
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #f8f8f8;
	}
	
	.tabs {
		display: flex;
		align-items: center;
		.item {
			flex: 1;
			text-align: center;
			&.is-active {
				.cell {
					text {
						font-weight: bold;
						color: #000;
					}
					&::before {
						visibility: visible;
					}
				}
			}
		}
		.cell {
			position: relative;
			&:before {
				content: '';
				position: absolute;
				left: 50%;
				top: 60rpx;
				margin-left: -50rpx;
				width: 120rpx;
				height: 16rpx;
				border-radius: 20rpx;
				background: -webkit-linear-gradient(left, #FDD69F, rgba(255, 255, 255, 0));
				visibility: hidden;
			}
			text {
				position: relative;
				z-index: 1;
				display: block;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 34rpx;
				color: #999;
			}
		}
	}
	
	.hintModalBox {
		background: #fff;
		width: 80vw;
		text-align: center;
		padding: 20rpx;
		height: 600rpx;
		border-radius: 30rpx;

		image {
			width: 400rpx;
			height: 400rpx;
		}

		.subBtn {
			background: #41644A;
			margin-top: 40rpx;
			border-radius: 30rpx;
			height: 80rpx;
			width: 100%;
			color: #fff;
		}
	}

	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.data-list {
		.item {
			background: #fff;
			margin: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
		}
		.cell {}
		.thead {
			display: flex;
			align-items: center;
			.title {
				flex: 1;
				line-height: 80rpx;
				font-size: 32rpx;
			}
			.number {
				line-height: 80rpx;
				font-size: 30rpx;
			}
		}
		.tbody {
			.row {
				position: relative;
				background: #ffefda;
				margin: 20rpx 0;
				border: 1px solid #dec3a0;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				&.is-used {
					background: #f8f8f8;
					border-color: #ddd;
					.name {
						color: #999;
					}
					.right {
						&::before {
							border-color: #ddd;
						}
						.btn {
							display: none;
						}
						.icon {
							display: block;
						}
					}
					.clip-t,
					.clip-b {
						&:before {
							border-color: #ddd;
						}
					}
				}
			}
			.left {
				flex: 1;
				padding: 30rpx;
				.name {
					padding: 0 0 10rpx;
					line-height: 40rpx;
					font-size: 28rpx;
				}
				.time {
					line-height: 40rpx;
					color: #999;
				}
			}
			.right {
				width: 200rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 30rpx;
					bottom: 30rpx;
					border-left: 1px dashed #dec3a0;
				}
				.btn {
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 60rpx;
					background: #41644A;
					color: #fff;
					font-size: 28rpx;
					padding: 0 30rpx;
				}
				.icon {
					display: none;
					image {
						display: block;
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
			.clip-t,
			.clip-b {
				position: absolute;
				width: 40rpx;
				height: 20rpx;
				right: calc(200rpx - 20rpx);
				overflow: hidden;
				&:before {
					content: '';
					position: absolute;
					left: 0;
					width: 40rpx;
					height: 40rpx;
					background: red;
					box-sizing: border-box;
					border-radius: 50%;
					border: 1px solid #dec3a0;
					background: #ffffff;
				}
			}
			.clip-t {
				top: -1px;
				&:before {
					bottom: 0;
				}
			}
			.clip-b {
				bottom: -1px;
				&:before {}
			}
		}
	}
</style>